<template>
	<view class="content">
		<view class="title" :style="'height:' +  header.height + 'px;' + 'padding-top:' + header.top + 'px;padding-bottom:6rpx'">
			<image @click="retu_back" src="../../static/images/public/return.png" mode=""></image>
		</view>
		<view class="page_box" :style="'margin-top:' + header.allHeight + 'px'">
			<textarea class="textarea" ref="text" v-model="inputValue" placeholder="分享这一刻，给懂你的人…" maxlength="100" focus
			 @keyboardheightchange="close_emoji" @input="text_input" />
			<scroll-view scroll-y="true" class="scroll-content" enable-flex="true">
				<view class="scroll-content-box">
					<view class="img_video_holder"></view>
					<view v-if="isImg" class="img_video_box">
						 <view class="item" v-for="(item, index) in img_list" :key="index"  >
							<image class="img" :src="item" mode="aspectFill"></image>
						 	<image @click="delete_img(index)" class="close" src="../../static/images/public/close.png" ></image>
						 </view>
					 </view>
					 <view v-if="isVideo" class="img_video_box">
						 <view class="item">
							<video class="img"  id="myVideo" :src="video_url" @play="video_ready" ></video>
							<image @click="delete_video()" class="close" src="../../static/images/public/close.png" ></image>
						 </view>
					 </view>
				</view>
			</scroll-view>
			<view :class="['tempBottom',showPannel ? 'tempBottomH':'']"  :style="'margin-bottom:' + keyBorderHeight + 'px'">
				
			</view>
			<view class="bottom" :style="'bottom:' + keyBorderHeight + 'px'">
				<view class="address_box" >
					<view class="address">
						<image @click="get_address()" src="@/static/images/public/address.png" mode="scaleToFill"></image>
									<text>{{ address }}</text>
									<image v-show="address.length>0" class="close" @click="delete_address()" src="../../static/images/public/close.png" mode=""></image>
					</view>
								<view class="btn" @click="create">
									发布
								</view>
				</view>
				<view class="btn">
					<image @click="choose_img" class="btn_video" src="@/static/images/public/img.png" mode=""></image> 
					<image @click="choose_video" class="btn_pic" src="@/static/images/public/post_video.png" mode=""></image>
					<image @click="choose_smile" class="btn_expression" src="@/static/images/public/expression.png" mode=""></image>
				</view>
				<swiper v-if="showPannel" class="slider" >
				    <swiper-item v-for="(item, key) in emojiData" :key="key" class="slider-emoji"  >
				        <text v-for="(emoji, index) in item" :key="index" @click="selemoji(emoji)" >{{ emoji }}</text>
				    </swiper-item>
				</swiper> 	
			</view>
		</view>
		</view>
</template>

<script> 
import { mapState } from 'vuex'
import { createTip } from '@/api/home/home.js';
import {geocode, updateLocationInfo} from '@/api/user/user.js';

import request from '@/util/request/request.js';
import emoji from "@/components/emoji.js";
export default {  
		computed: {
			...mapState({
				vuex_tabbar: state => state.tabbarStore.vuex_tabbar
			})
		},
		data() {
			return {
				user_id: '',
				emojiData: [],
				action: request.config.baseUrl + 'user/upload', // 上传地址
				video_url:'',
				img_list: [],
				temp_img_list:[],
				isImg: false,
				isVideo: false,
				header: {
					top: 0,
					height: 0,
					allHeight: 0
				},
				reg: /\#[\S]{1,3}\;/gi,
				inputValue: '', 
				showPannel: false,
				address: '', // 地址
				latitude: '', // 经纬度
				longitude: '' ,// 经纬度
				keyBorderHeight: 0,
				bottomTempH: 226,
			}
		},
		created() {
			
			uni.onKeyboardHeightChange(res => {
			  console.log(res.height)
			  this.keyBorderHeight =  res.height
			  this.close_emoji()
			})
			const header = uni.getMenuButtonBoundingClientRect();
			this.header.top = header.top;
			this.header.height = header.height;
			this.header.allHeight = header.top + header.height + 6;
			// 判断是否登录
			if (uni.getStorageSync('token')) {
				this.user_id = uni.getStorageSync('userInfo').user_id
			} else {
				uni.navigateBack();
			}
			// 获取坐标 、位置
			this.get_address()
			// 表情包
			var page = Math.ceil(emoji.length/21);
			for (let i = 0; i < page; i++) {
				this.emojiData[i] = [];
				for (let k = 0; k < 21; k++) {
					emoji[i*21+k] ? this.emojiData[i].push(emoji[i*21+k]) : ''
				}
			}  
		},
		methods: {
			// 发布
			create() {
				let data = {
					userId: this.user_id,
					note: this.inputValue, // 文本描述
					video_url: this.video_url, // 视频地址
					pic_urls: this.img_list, // 图片 列表
					latitude: this.latitude, // 经纬度
					longitude: this.longitude,// 经纬度
					address: this.address // 地址描述
					// temp: true, // 是否是草稿					
				}
				if (!this.inputValue) {
					uni.showToast({
						title: '请输入内容!',
						icon: 'none'
					})
					return false
				}
				if(this.img_list.length == 0 && this.video_url == ''){
					uni.showToast({
						title: '请上传图片或视频!',
						icon: 'none'
					})
					return false
				}
				uni.showLoading({
					title: '发布中',
					mask: true
				})
				createTip(data).then(res => {
					
					if (res.status == 1) {
						uni.showToast({
							title: '发布成功',
							icon: 'none',
							duration: 1500,
							mask:true
						})
						setTimeout(function () {
							uni.navigateBack()
						}, 1400);
						
					} else {
						uni.showToast({
							title: '发布失败',
							icon: 'none'
						})
					}
				},err=>{
					uni.hideLoading();
					uni.showToast({
						title: '发布失败',
						icon: 'none'
					})
				})
			},
			// 隐藏 表情框
			close_emoji() {
				this.showPannel = false
			},
			// 输入事件
			text_input(event) {
				console.log("xxxxxxxx");
				// if (this.inputValue.length >= 100) { 
				// 	this.inputValue = this.inputValue.split(0, 100)
				// }
			},
			// 选中表情
			selemoji(m) {
				// console.log(this.$refs.text.selectionStart)
				this.inputValue += m
			},
			// 
			video_ready() {
				console.log(uni.createVideoContext('myVideo'))
				this.videoContext = uni.createVideoContext('myVideo');
				this.videoContext.requestFullScreen();
			},
			// 删除图片按钮
			delete_img(index) {
				let list = this.img_list
				list.splice(index, 1)
				this.img_list = list
			},
			delete_video(){
				this.isVideo = false
				this.video_url = ""
			},
			// 获取坐标
			get_address() {
				let that = this
				uni.getLocation({
					type: 'wgs84',
					success: function (res) { 
						console.log(res.latitude)
						that.latitude = res.latitude
						that.longitude = res.longitude
						geocode(res).then(result => {
							if(result.status === 1){
								that.address = result.data.city + result.data.district;
							}
						});
						updateLocationInfo({latitude:res.latitude,longitude:res.longitude})
						
					}
				})
			},
			// 取消坐标
			delete_address() {
				this.latitude = ''
				this.longitude = ''
				this.address = ''
			},
			// 图片上传按钮
			upload_img(){
				const that = this
				if(that.img_list.length < 4) {
					uni.chooseImage({
						count: 4 - that.img_list.length,
						success: (chooseImageRes) => {
							const tempFilePaths = chooseImageRes.tempFilePaths;
							uni.showLoading({
								title: '加载中',
								mask: true
							})
							for(let i=0; i<tempFilePaths.length; i++) {
								uni.uploadFile({
									url: that.action,
									filePath: tempFilePaths[i],
									name: 'file',
									formData: {},
									success: (uploadFileRes) => {
										// let list = this.img_list
										let list = that.temp_img_list
										console.log(uploadFileRes.data);
										list.push({index:i,img:JSON.parse(uploadFileRes.data).data[0].url})
										that.sortImgs()
									},
									complete: function() {
										if(i == tempFilePaths.length-1) {
											uni.hideLoading();
										} 
									},
									fail: function() {
										uni.hideLoading();
									}
								});								
							}
						},
					});
				}
			},
			choose_img() {
				let that = this
				this.hiddleKeyBord()
				setTimeout(()=>{
					that.upload_img()
				},200)
				
			},
			sortImgs(){
				this.temp_img_list.sort(this.sortIndex);
				this.img_list = this.temp_img_list.map(item => item.img)
				this.isImg = true
				this.video_url = ''
			},
			sortIndex(a, b) {
				return a.index - b.index
			},
			choose_video(){
				let that = this
				this.hiddleKeyBord()
				setTimeout(()=>{
					that.upload_video()
				},200)
			},
			// 视屏上传按钮
			upload_video () {
				
				
				const that = this
				uni.chooseVideo({
					count: 1,
					sourceType: ['camera', 'album'],
					success: function (res) {  
						if(res.size > 104857600) {
							console.log('文件太大')
							return
						}  
						uni.showLoading({
							title: '加载中',
							mask: true
						});
						uni.uploadFile({
							url: that.action,
							filePath: res.tempFilePath,
							name: 'file',
							success: (uploadFileRes) => {
								that.video_url = JSON.parse(uploadFileRes.data).data[0].url
								that.isVideo = true
								that.img_list = '' 
							},
							complete: function() {
								uni.hideLoading();
							}
						})
					}
				});
			},
			// 放回按钮
			retu_back() {
				uni.showModal({
					title: '提示',
					content: '要放弃发布动态吗？',
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
							uni.switchTab({
								url:"/pages/home2/home"
							})
							// uni.navigateBack({
							// 	delta: 1
							// })
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			// 点击表情
			show() {
				// this.keyBorderHeight = 200
				this.showPannel = !this.showPannesl;
			},
			choose_smile() {
				let that = this
				this.hiddleKeyBord()
				setTimeout(()=>{
					that.show()
				},200)
				
			},
			hiddleKeyBord(){
				uni.hideKeyboard()
				
			}
		}
	}

</script>
<style scoped lang="scss">
	* {
		box-sizing: border-box;
	}
	.content {
		display: flex;
		flex-direction: column;
		background-color: #FFFFFF;
		width: 100vw;
		height: 100vh;
		.title {
				position: fixed;
				top: 0;
				width: 100%;
				left: 0;
				box-sizing: content-box;
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-left: 40rpx;
				image {
					width: 28rpx;
					height: 28rpx;
				}
			}
			.page_box {
						flex: 1;
						display: flex;
						flex-direction: column;
						.textarea {
							width: 750rpx;
							box-sizing: border-box;
							height: 300rpx;
							padding: 38rpx 32rpx;
						}
						.scroll-content{
							display: flex;
							flex: 1;
							.scroll-content-box {
								display: flex;
								height: 100%;
								width: 100%;
								flex-direction: column;
								justify-content: space-between;
								align-items: flex-end;
								.img_video_holder {
									width: 100%;
									height: 1rpx;
								}
								.img_video_box {
									width: 100%;
									display: flex;
									flex-wrap: wrap;
									.item {
										position: relative;
										width: 280rpx;
										height: 280rpx;
										margin-left: 32rpx;
										margin-top: 32rpx;
										.img {
											border-radius: 10rpx;
											width: 280rpx;
											height: 280rpx;
										}
										.video-item-closebtn {
											position: absolute;
											top: 8rpx;
											right: 8rpx;
											width: 28rpx;
											height: 28rpx;
											z-index: 10;
										}
										.close {
											position: absolute;
											top: 8rpx;
											right: 8rpx;
											width: 28rpx;
											height: 28rpx;
											z-index: 10;
										}
										
									}
								}
							}
							
						}
						.tempBottom{
							display: flex;
							flex-direction: column;
							width: 100%;
							height: 226rpx;
							background-color: #FFF;
						}
						.tempBottomH{
							height: 482rpx;
						}
						.bottom {
							background-color: #FFFFFF;
							display: flex;
							flex-direction: column;
							position: absolute;
							z-index: 100;
							width: 100%;
							bottom: 0;
							
							.address_box {
								height: 64rpx;
								display: flex;
								text-align: center;
								justify-content: space-between;
								margin-top: 48rpx;
								margin-bottom: 26rpx;
								padding: 0 32rpx;
								.address {
									display: flex;
									text-align: center;
									justify-content: space-between;
									align-items: center;
									text {
										padding: 0 16rpx;
									}
									image {
										width: 32rpx;
										height: 36rpx;
									}
									.close {
										width: 32rpx;
										height: 32rpx;
									}
								}
								.btn {
									display: block;
									text-align: center;
									width: 120rpx;
									height: 64rpx;
									line-height: 64rpx;
									background: linear-gradient(135deg, #FC4F91 0%, #FD6CE6 100%);
									border-radius: 4rpx; 
									font-size: 30rpx;
									font-weight: 500;
									color: #fff;
								}
							}
							.btn {
								display: flex;
								align-items: center;
								height: 88rpx;
								border-top: 1rpx solid #ddd;
								// box-shadow: 0rpx 0rpx 20rpx 1rpx #ddd;
								.btn_pic {
									width: 42rpx;
									height: 36rpx;
									margin: 0 40rpx;
								}
								.btn_video {
									width: 42rpx;
									height: 36rpx;
									margin: 0 40rpx;
								}
								.btn_expression {
									width: 42rpx;
									height: 42rpx;
									margin: 0 40rpx;
								}
							}
							.slider {
							    width: 100%;
							    height: 256rpx;
							    .slider-emoji {
							        width: 100%;
									display: flex;
							        flex-direction: row;
							        flex-wrap: wrap;
							        justify-content:center;
							        text {
							            // width: 53%;
							            text-align: center;
							            padding: 21rpx 30rpx;
							        }
							    }
							} 
						}
						
						.lastbox{
						    justify-content: flex-start;
						}
	}

		
	}
</style>
